<template>
  <div>
    <el-dialog title="爬虫任务信息" :close-on-click-modal="false" :visible.sync="databaseFormVisible" :before-close="handelCancel" width="40%">
      <el-scrollbar style="height:100%">
        <znxd-form ref="form" v-model="formData" v-if="databaseFormVisible" :formColumn="formColumn" :formRules="formRules" :initData="initData" :formButtons="formButtons" @handeSave="handeSave" @handelCancel="handelCancel"></znxd-form>

        <!-- <el-row class="example">
          <el-col span="24" class="title">示例网址:</el-col>
          <el-col span="24">中国农产品商务部：</el-col>
          <el-col span="24">http://nc.mofcom.gov.cn/jghq/priceList?craftName=%E5%A4%A7%E7%99%BD%E8%8F%9C</el-col>
          <el-col span="24">农药登记数据：</el-col>
          <el-col span="24">http://www.chinapesticide.org.cn/hysj/index.jhtml</el-col>
        </el-row>-->
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script>
import { add, update } from "@/api/task/webspider.js";
export default {
  components: {},
  data() {
    return {
      // // 类型字典
      // typeOptions: [
      //   {
      //     label: "接口数据采集",
      //     value: 0
      //   }
      // ],
      // 表单配置
      formColumn: [],
      formRules: {
        jobName: [{ required: true, message: "不能为空" }],
        spiderStartUrl: [{ required: true, message: "不能为空" }]
      },
      formData: {},
      formButtons: [
        {
          label: "保存",
          type: "primary",
          handelClick: (row) => {
            this.handeSave(row);
          }
        },
        {
          label: "取消",
          plain: true,
          handelClick: () => {
            this.handelCancel();
          }
        }
      ]
    };
  },
  props: {
    databaseFormVisible: Boolean,
    initData: Object
  },
  watch: {
    initData(val) {
      // console.log(this.initData);
      this.formData = {
        ...val
      };
    }
    // formData: {
    //   deep: true,
    //   handler: function (val) {
    //     console.log("formData", val);
    //   }
    // }
  },
  methods: {
    initForm() {
      this.formColumn = [
        {
          name: "jobName",
          label: "任务名称",
          type: "input"
        },
        // {
        //   name: "jobType",
        //   label: "任务类型",
        //   type: "select",
        //   options: this.typeOptions
        // },
        {
          name: "jobDescription",
          // name: "jobDescription",
          label: "任务描述",
          type: "textarea"
        },
        {
          name: "spiderStartUrl",
          // name: "jobDescription",
          label: "采集网址",
          type: "textarea",
          maxLength: 2000
        },
        {
          label: "示例网站",
          type: "label",
          content: "中国农产品商务部：<br/> http://nc.mofcom.gov.cn/jghq/priceList?craftName=%E5%A4%A7%E7%99%BD%E8%8F%9C  <br/>  农药登记数据： <br/> http://www.chinapesticide.org.cn/hysj/index.jhtml"
        }
      ];
    },
    handeSave(formData) {
      // let _this = this;
      let well = this.$refs.form.validateForm();
      if (!well) return false;
      // console.log("handle formData", formData);
      let saveEvent;
      if (this.initData && this.initData.id) {
        saveEvent = update;
      } else {
        saveEvent = add;
      }
      saveEvent(formData)
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.$message({
              message: data.msg || "操作成功",
              type: "success"
            });
            this.handelCancel();
            // this.$router.push({ path: "settingRulesWebSpider", query: { id: this.formData.id, webside: this.formData.spiderStartUrl } });
            // setTimeout(function () {
            //   window.open(_this.formData.spiderStartUrl, "_blank")
            // }, 1000)
          } else {
            // this.$message.error(data.msg);
            this.$message({
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(() => {
          // this.$message.error(error);
          this.$message({
            message: "操作失败",
            type: "error"
          });
        });
    },
    handelCancel() {
      this.$emit("close");
    }
  },
  mounted() {
    this.formData = {
      ...this.initData
    };
    this.initForm();
  }
};
</script>
<style lang="scss" scoped>
// .example {
//   line-height: 1.5rem;
//   // padding-left: 80px;
//   // .title {
//   //   // margin-left: -20px;
//   //   color: sandybrown;
//   // }
// }
</style>
